import React, { Component } from 'react'
import './index.css'
import Header from './Header'
import List from './List'
import Footer from './Footer'
export default class TodoList extends Component {
  // 初始化数据
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '打代码', done: false },
      { id: '004', name: '学习', done: false }
    ]
  }
  // 新增
  addTodo = todoObj => {
    // 最加到数组中
    this.setState({ todos: [todoObj, ...this.state.todos] })
  }
  // 更新状态
  updateTodo = (id, done) => {
    const todos = this.state.todos.map(todoObj => {
      if (todoObj.id === id) return { ...todoObj, done }
      return todoObj
    })
    this.setState({ todos })
  }
  // 删除
  deleteTodo = id => {
    const todos = this.state.todos.filter(todoObj => {
      return todoObj.id !== id
    })
    this.setState({ todos })
  }
  // 全选
  checkAllTodo = event => {
    const todos = this.state.todos.map(todoObj => {
      return { ...todoObj, done: event.target.checked }
    })
    this.setState({ todos })
  }
  // 清除已完成数据
  clearAllDone = () => {
    const todos = this.state.todos.filter(todoObj => {
      return !todoObj.done
    })
    this.setState({ todos })
  }

  render() {
    const state = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
          <Footer todos={state.todos} clearAllDone={this.clearAllDone} checkAllTodo={this.checkAllTodo} />
        </div>
      </div>
    )
  }
}
